import { Line } from '@ant-design/charts';
import DemoBar from './components/Bar';
import { jigui, Dianli, Jiqi, useDianliangHistory, suanliType, saleData, numData, numData2, SortListData, numData3 } from './data';
/**
 * 
地域 各个区域

电量-耗电 

机柜数- 在使用的-空闲

机器 已售-未收

机器-算力类型



租户
 */
import './style.less'
import ACColu from './components/Column';
import ACColu2 from './components/Column2';
import LineQu from './components/Line';
import ChinaMap from './components/ChinaMap';
import ACPie from './components/Pie';
import Number from './components/Numbers';
import SortList from './components/SortList';
import CarouselList from './components/CarouselList';
const type = 1;
export default function BS() {
    const mapOption = {
        series: [
            {
                data: [
                    { name: '北京', value: 123 },
                    { name: '上海', value: 456 },
                    // 其他省份数据
                ]
            }
        ]
    };
    return <div className='xxl-flex xxl-flex-column xxl-main ' style={{ height: "calc(100vh - 56px - 44px - 44px)" }}>
        {/* 上 */}

        {/* 中左 */}
        <div className='xxl-flex' style={{ height: '66%' }}>
            <div className='xxl-flex w0 xxl-flex-column xxl-flex-1'>
                <div className=''>
                    <div className='title-h xxl-flex xxl-flex-ju'><div>
                        算力中心数据可视化平台
                    </div>
                        <div className='xxl-flex-1 CarouselList-c'>
                        </div>
                    </div>
                </div>
                <CarouselList>  </CarouselList>
                
                <ChinaMap option={mapOption} width="800px" height="600px" />
                <div>
               
                </div>
            </div>
            <div className='xxl-flex  xxl-flex-column  w50' style={{ paddingLeft: '5px' }}>
                <div className='xxl-flex wmt style-1 ' >
                    <Number inline {...numData} line={1}></Number>
                    <Number inline {...numData3} line={1}></Number>
                </div>
                <div className='xxl-flex wmt style-1 xxl-flex-1' >
                    <ACPie {...jigui} />
                    <ACPie {...suanliType} />
                </div>
                <div className='xxl-flex wmt style-1 ' >
                <Number inline {...numData2} line={2}></Number>
                </div>
            </div>
        </div>
        {/* 中右 */}
        <div className='xxl-flex style-1' style={{ height: '33%', paddingTop: '10px' }}>
            <DemoBar  {...Dianli}></DemoBar>
            <LineQu {...useDianliangHistory} />
            <ACColu   {...saleData}></ACColu>
            <ACColu2 {...Jiqi}></ACColu2>

            <SortList {...SortListData} />
        </div>
    </div>
}